<template>
  <div>
    <transition name="el-fade-in-linear">
      <div v-show="flag" class="backtop" @click="backtop">
        <i class="top-img"></i>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      var dis =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop

      if (dis > 400) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    backtop () {
      var timer = setInterval(function () {
        const osTop =
          document.documentElement.scrollTop || document.body.scrollTop
        const ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed
        this.isTop = true
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 30)
    }
  }
}
</script>
